<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Add Gallery</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">

        <link rel="stylesheet" href="css/bootstrap.css">
        <style>
            body {
                padding-top: 60px;
                padding-bottom: 40px;
            }
        </style>
        <link rel="stylesheet" href="css/bootstrap-responsive.min.css">
        <link rel="stylesheet" href="css/main.css">

        <script src="js/vendor/modernizr-2.6.1.min.js"></script>
    </head>
    <body>

        <div class="navbar navbar-inverse navbar-fixed-top">
            <div class="navbar-inner">
                <div class="container">
                    <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </a>
                    <a class="brand" href="#">Prime Resort</a>
                    <div class="nav-collapse collapse">
                        <ul class="nav">
                            <li><a href="home.html">Home</a></li>
                            
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Room <b class="caret"></b></a>
                                <ul class="dropdown-menu">
                                	<li><a href="add-room.html">Add New Room Type</a></li>
                                    <li><a href="view-rooms.html">View Types of Rooms</a></li>
                                    <li><a href="view-rooms.html">View Rooms</a></li>
                                    <li class="divider"></li>
                                    <li><a href="add-facility.html">Add New Facility</a></li>
                                    <li><a href="view-rooms.html">View Facilities</a></li>
                                    
                                </ul>
                            </li>
                            
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Addon <b class="caret"></b></a>
                                <ul class="dropdown-menu">
                                	 <li><a href="add-addon-type.html">Add New Addon Type</a></li>
                                    <li><a href="view-addon-types.html">View Addon Types</a></li>
                                    <li class="divider"></li>
                                    <li><a href="add-addon.html">Add new Addon</a></li>
                                    <li><a href="view-addons.html">View Addons</a></li>
                                </ul>
                            </li>
                            
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Membership <b class="caret"></b></a>
                                <ul class="dropdown-menu">
                                    <li><a href="add-membership-type.html">Add new Membership Type</a></li>
                                    <li><a href="view-membership-types.html">View Membership Types</a></li>
                                </ul>
                            </li>
                            
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Package <b class="caret"></b></a>
                                <ul class="dropdown-menu">
                                    <li><a href="add-package.html">Add new Package</a></li>
                                    <li><a href="view-packages.html">View Packages</a></li>
                                </ul>
                            </li>
                            
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Event <b class="caret"></b></a>
                                <ul class="dropdown-menu">
                                    <li><a href="add-event.html">Add new Event</a></li>
                                    <li><a href="view-events.html">View Events</a></li>
                                </ul>
                            </li>
                            
                             <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Bookings <b class="caret"></b></a>
                                <ul class="dropdown-menu">
                                    <li><a href="add-new-booking.html">Add New booking</a></li>
                                    <li><a href="view-bookings.html">View Bookings</a></li>
                                    <li class="divider"></li>
                                    <li><a href="cancellation-policy.html">Cancellation Policy</a></li>
                                </ul>
                            </li>
                            
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">User <b class="caret"></b></a>
                                <ul class="dropdown-menu">
                                
                                    <li class="dropdown-submenu">
                                    	<a href="#">Admin User</a>
                                        <ul class="dropdown-menu">
                                            <li><a href="add-admin-user.html">Add new Admin User</a></li>
                                            <li><a href="view-admin-users.html">View Admin users</a></li>
                                		</ul>
                           			</li>
                                	<li class="dropdown-submenu">
                                		<a href="#">Registered User</a>
                                        <ul class="dropdown-menu">
                                            <li><a href="add-registered-user.html">Register New User</a></li>
                                            <li><a href="view-registered-users.html">View Regstered Users</a></li>
                                		</ul>
                                    </li>
                                    
                                </ul>
                            </li>
                            
                            <li><a href="send-email.html">Email</a></li>
                            
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Report <b class="caret"></b></a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">Membership</a></li>
                                    <li><a href="#">Events</a></li>
                                    <li><a href="#">Bookings</a></li>
                                    <li><a href="#">Others</a></li>
                                </ul>
                            </li>
                            
                             <li class="dropdown active">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Gallery <b class="caret"></b></a>
                                <ul class="dropdown-menu">
                                    <li><a href="add-gallery-type.html"> Add New Gallery Type</a></li>
                                     <li><a href="view-gallery-types.html">View Gallery Types</a></li>
                                     <li class="divider"></li>
                                    <li><a href="add-gallery.html"> Add New Gallery</a></li>
                                    <li><a href="view-galleries.html">View Galleries</a></li>
                                   
                                </ul>
                            </li>
                            
                            <li class="dropdown">
                                    
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Profile <b class="caret"></b></a>
                                <ul class="dropdown-menu">
                                
                                    <li><a href="edit-profile.html">Edit Profile</a></li>
                                	<li><a href="change-password.html">Change Password</a></li>
                                    
                                    <li><a href="#"><span class="label label-important">Logout</span></a></li>
                                    
                                </ul>
                            </li>
                            
                        </ul>
                       
                    </div><!--/.nav-collapse -->
                </div>
            </div>
        </div>

        <div class="container">

            <div class="contents">
               
               <legend>Add New Gallery</legend>
               <form action="" method="post" id="add-gallery">
               
               <div class="span4">
               
               		<p>
                        <label for="">Gallery Name</label>
                        <input type="text" required name="gallery-name" class="input-xlarge" placeholder="Enter name of Gallery">
                    </p>
                    
                     <p>
                        <label>Select Gallery Image</label>
                        <input type="button" onClick="add_input()" class="btn pull-right" value="Add More">
                        <input type="file" id="" name="gallery-image" required class="input-xxlarge">
                    </p>
               
               </div>
               
               <div class="span5 offset2">
               
               		<p>
                         <label for="" >Select Gallery Type</label>
                        <select name="" class="input-large" id="">
                            <option selected>Select </option>
                            <option value="" >Room Gallery</option>
                            <option value="" >Event Gallery</option>
                            <option value="" >Resort Gallery</option>
                        </select>
                    </p>
                    
                           
               
               </div>
               
               <div class="clearfix"></div>
               
               <div class="dynamic" id="dynamic-image">
                            	
                                
				</div>
               
               <div class="clearfix"></div>
               
               
               <div class="span11">
               		<br>
                    <p>
                        <input type="submit" class="btn btn-primary btn-large" value="Save" name="submit">
                    </p>
                    <p>
                         <label class="text-success"> Display the "succesfully saved" message here </label>
                    </p>
               </div>
               
               <div class="clearfix"></div>
               
               </form>
               
            </div>

            

            <hr>

            <footer>
                <p>&copy; The Prime Resort, 2012</p>
            </footer>

        </div> <!-- /container -->

        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.8.1.min.js"><\/script>')</script>

        <script src="js/vendor/bootstrap.min.js"></script>
        
        <script src="js/jquery.validate.min.js"></script>

        <script src="js/main.js"></script>
        
        <script type="text/javascript">
		
		
			$(document).ready(function() { 
			 	 
				 // form validation
				 $("#add-gallery").validate();
				 $("#add-gallery-type").validate();
				 
            });
		
			
			function add_input(){ // dynamic file input box generation script for gallery image upload 
			
				
				
				if(!this.counter)this.counter = 0; //member variable to serve as static variable
				this.counter++; // counter will be increamented everytime the function is called and the every new file input will get a unique name
			
				var div_id = document.getElementById('dynamic-image');
				
				var link = document.createElement('div'); //creating new DIV under dynamic-image DIV
				link.setAttribute('class', 'alert fade alert-info in file-box span2');
				link.innerHTML= "<button data-dismiss='alert' class='close' type='button'>×</button><input type='file' class='input-large' name='gallery-image"+this.counter+"' required>";
				div_id.appendChild(link);
			
			}
		
		</script>
    </body>
</html>
